<template>
  <el-container>
    <el-aside width="500px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="个人描述">
          <el-input type="textarea" v-model="ruleForm.intro"></el-input>
        </el-form-item>

        <el-form-item label="id">
          <el-input v-model="ruleForm.id" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="绑定手机">
          <el-input v-model="ruleForm.mobile" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="绑定邮箱">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="changemes('ruleForm')">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-aside>
    <el-main>
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/photo"
        :show-file-list="false"
        :http-request="doUploadIcon"
      >
        <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-main>
  </el-container>
</template>

<script>
import { userInfos, uploadIcon, changeUserInfo } from "@/api/mine.js";
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      ruleForm: {
        name: "",
        intro: "",
        id: '',
        photo: "",
        mobile: "",
        email: ""
      }
    };
  },
  methods: {
    async doUploadIcon(config) {
      let fd = new FormData();
      fd.append("photo", config.file);
      let res = await uploadIcon(fd);
      this.ruleForm.photo = res.data.data.photo;
      this.$store.commit("increment", this.ruleForm);

      let user = JSON.parse(window.localStorage.getItem("userInfo"));
      user.photo = this.ruleForm.photo;
      window.localStorage.setItem("userInfo", JSON.stringify(user));
    },
    changemes(ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          let res = await changeUserInfo(this.ruleForm);
          this.ruleForm.name = res.data.data.name;
          this.ruleForm.intro = res.data.data.intro;
          this.ruleForm.id = res.data.data.id.toString();
          this.ruleForm.email = res.data.data.email;
          this.$store.commit("increment", this.ruleForm);

          let user = JSON.parse(window.localStorage.getItem("userInfo"));
          user.name = this.ruleForm.name;
          window.localStorage.setItem("userInfo", JSON.stringify(user));

          this.$message.success('修改成功')
        }
      });
    }
  },

  async created() {
    //获取用户信息
    let res = await userInfos();
    // console.log(res);

    if (res) {
      if (res.status == 200) {
        this.ruleForm.name = res.data.data.name;
        this.ruleForm.intro = res.data.data.intro;
        this.ruleForm.id = res.data.data.id.toString();
        this.ruleForm.photo = res.data.data.photo;
        this.ruleForm.mobile = res.data.data.mobile;
        this.ruleForm.email = res.data.data.email;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-form {
  padding: 40px;
  .el-form-item {
    margin-bottom: 30px !important;
  }
}
.avatar-uploader {
  padding: 40px;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>